<?php
	include "../ini.php";
	
	include "../../libraries/xl_hoa_don.php";
	include "../../libraries/xl_bo_dem.php";
	
	$dt_xl_hoa_don = new xl_hoa_don;
	$dt_xl_bo_dem = new xl_bo_dem;
	
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include "../widgets/js_css.php";?>
</head>
<body>
<div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->
  <?php include "../widgets/sidebar.php"; ?>
  <div id="main-content"> <!-- Main Content Section with everything -->
  <!--noscript-->
    <!-- Page Head -->
    <div class="content-box"> 
      
      <!-- Start Content Box -->
      
      <div class="content-box-header">
        <h3 style="cursor: s-resize;">Trang chủ</h3>
        <div class="clear"></div>
      </div>
      <!-- End .content-box-header -->
      
      <div class="content-box-content">
        <div style="display: block;" class="tab-content default-tab" id="tab2"> 
          <!-- Start Notifications --> 
          <?php thong_bao();?>
          <!-- End Notifications -->
          
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery/external/highcharts-2.1.9/js/highcharts.js"></script>
		<script type="text/javascript" src="../js/jquery/external/highcharts-2.1.9/js/modules/exporting.js"></script>
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						zoomType: 'xy'
					},
					title: {
						text: 'Biểu đồ số lượt truy cập, số đơn hàng trong vòng 7 ngày'
					},
					subtitle: {
						text: '(Từ ngày <?php echo date('d-m-Y', strtotime('-6 days'))?> đến ngày <?php echo date('d-m-Y')?>)'
					},
					xAxis: [{
						categories: [<?php
							for($i=6 ; $i>=1 ; $i--) {
								echo "'";
								echo date('d-m', strtotime("-$i days"));
								echo "', ";
							}
							
							echo "'";
							echo date('d-m');
							echo "'";			
						
						?>]
					}],
					yAxis: [{ // Primary yAxis
						labels: {
							formatter: function() {
								return this.value;
							},
							style: {
								color: '#89A54E'
							}
						},
						title: {
							text: 'Số đơn hàng',
							style: {
								color: '#89A54E'
							}
						}
					}, { // Secondary yAxis
						title: {
							text: 'Lượt truy cập',
							style: {
								color: '#4572A7'
							}
						},
						labels: {
							formatter: function() {
								return this.value +' lượt';
							},
							style: {
								color: '#4572A7'
							}
						},
						opposite: true
					}],
					tooltip: {
						formatter: function() {
							return ''+
								this.x +': '+ this.y +
								(this.series.name == 'Số đơn hàng' ? ' đơn hàng' : ' lượt');
						}
					},
					legend: {
						layout: 'vertical',
						align: 'left',
						x: 120,
						verticalAlign: 'top',
						y: 100,
						floating: true,
						backgroundColor: '#FFFFFF'
					},
					series: [{
						name: 'Lượt truy cập',
						color: '#4572A7',
						type: 'column',
						yAxis: 1,
						data: [<?php
							for($i=6 ; $i>=1 ; $i--) {
								$ngay =  date('Y-m-d', strtotime("-$i days"));
								echo $dt_xl_bo_dem->so_luong_theo_ngay($ngay);
								echo ", ";
							}
							
							$ngay = date('Y-m-d');
							echo $dt_xl_bo_dem->so_luong_theo_ngay($ngay);						
						?>]		
					
					}, {
						name: 'Số đơn hàng',
						color: '#89A54E',
						type: 'spline',
						data: [<?php
							for($i=6 ; $i>=1 ; $i--) {
								$ngay =  date('Y-m-d', strtotime("-$i days"));
								echo $dt_xl_hoa_don->so_luong_theo_ngay($ngay);
								echo ", ";
							}
							
							$ngay = date('Y-m-d');
							echo $dt_xl_hoa_don->so_luong_theo_ngay($ngay);						
						?>]
					}]
				});
				
				
			});
				
		</script>
		
        
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
          
        </div>
        <!-- End #tab2 --> 
        
      </div>
      <!-- End .content-box-content --> 
      
    </div>
    <div id="footer">  <!-- Remove this notice or replace it with whatever you want --> 
    <!-- End #footer --> 
    
  </div>
  <!-- End #main-content --> 
</div>
</body>
</html>